<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;box-sizing: border-box;list-style: none;
        }
        .q{
            width: 1000px;
            height: 1000px;
            margin: 10px auto;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .lightblue{
            background-color: lightblue;
        }
        .lightgreen{
            background-color: lightgreen;
        }
        .pink{
            background-color: pink;
        }
        .purple{
            background-color: purple;
        }
        .black{
            background-color: black;
        }
        .orange{
            background-color: orange;
        }
        .right-box{
      position: fixed;
      width: 80px;
      right: 20px;
      top: calc(50% - 284px / 2);
      background-color: #fff;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      /* display: none; */
    }
    .right-list .item{
      padding: 10px 8px;
      font-size: 12px;
      color: #999;
      text-align: center;
      position: relative;
      cursor: pointer;
    }
    .right-list .item.active{
      color: #333;
    }
    .right-list .item::after{
      content: '';
      position: absolute;
      right: 0;
      top: 10px;
      width: 2px;
      height: 0px;
      background-color: #f00;
      transition: all 0.3s linear;
    }
    .right-list .item.active::after{
      height: 16px;
    }
    .right-list .zhineng.active::after,
    .right-list .erji.active::after{
      height: 32px;
    }
    header{
        height: 200px;
    }
    </style>
</head>
<body>
    <!-- <header></header> -->
<main>
    <div class="q red"></div>
    <div class="q yellow"></div>
    <div class="q lightblue"></div>
    <div class="q lightgreen"></div>
    <div class="q pink"></div>
    <div class="q purple"></div>
    <div class="q black"></div>
    <!-- <div class="q orange"></div> -->
 </main>
    <div class="right-box">
        <ul class="right-list">
          <li class="item active">手机</li>
          <li class="item zhineng">智能穿戴&VR</li>
          <li class="item erji">耳机音箱眼镜</li>
          <li class="item">智慧屏</li>
          <li class="item">笔记本电脑</li>
          <li class="item">精品平板</li>
          <li class="item">智能路由</li>
        </ul>
      </div>

      <script>
 var lous = document.querySelectorAll('main .q');
 console.log(lous);
  var rightItems = document.querySelectorAll('.right-list .item');
  console.log(rightItems);
//   console.log(rightItems);
  var rightBox = document.querySelector('.right-box');

  // 1、点击右侧选项滚动到对应的楼层
  var timer = null;
  var speed = 0;//速度
  for(var i = 0; i < lous.length; i++){
    rightItems[i].index = i;
    rightItems[i].onclick = function(){
      var _this = this;//记录this的值

      // 小红条往下走：速度为正值，_this.index的值是大于lastIndex；
      // 小红条往上走：速度为负值，_this.index的值是小于lastIndex；
      // 小红条不动，速度为0，_this.index的值是等于lastIndex；
      speed = (_this.index-lastIndex)*50;

      console.log('this.index=', _this.index,'lastIndex=',lastIndex,'speed=', speed);
      if(speed == 0) return;
      update();
      function update(){
        
        document.scrollingElement.scrollTop += speed;
        timer = requestAnimationFrame(update);
          
        // 小红条往下走: top <= 60 停止滚动；小红条往上走：top >= 60 停止滚动; 
        var isStop = speed>0&&lous[_this.index].getBoundingClientRect().top <= 0 || 
                     speed<0&&lous[_this.index].getBoundingClientRect().top >= 0;
                      console.log('aa',isStop);

        if (isStop) {
          lastIndex = _this.index;
          // 让页面停留在指定的位置，每一层楼距离页面顶部60px的位置
          document.scrollingElement.scrollTop = lous[_this.index].offsetTop-10;
          cancelAnimationFrame(timer);
        }
      }
    }
  }

  // 2、滚动页面的时候显示对应的小红条
  var clientHeight = document.documentElement.clientHeight;
  var index = 0;//记录当前滚动到的索引值
  var lastIndex = 0;//记录上一个索引值
  window.onscroll = function(){
    var scrollTop = document.scrollingElement.scrollTop;
    for(var i = 0; i < rightItems.length; i++){
      rightItems[i].classList.remove('active');
      if (scrollTop+clientHeight/2 > lous[i].offsetTop) {
        index = i;
      }
    }
    // console.log(index);
    lastIndex = index;
    rightItems[index].classList.add('active');
    // rightBox的显示和隐藏
//     if (scrollTop+clientHeight/4 > lous[0].offsetTop) {
//       rightBox.style.display = 'block';
//     }else{
//       rightBox.style.display = 'none';
//     }
  }
      </script>
</body>
</html>